<template>
	<view class="container">
		<com-head textTit="消息" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template v-if="list.length">
			<view class="list" v-for="(ele,index) in list" :key="index" @click="goDetails(ele)">
				<view class="head">
					<view class="title">
						<!-- 订单消息 -->
						<image v-if="ele.type != 1" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tongzhi.png"></image>
						<!-- 消费消息 -->
						<image v-if="ele.type == 1" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/liwu2.png"></image>
						{{ele.title}}
					</view>
					<view class="time">{{ele.create_time}}</view>
				</view>
				<view class="bottom">
					<text class="content">{{ele.content}}</text>
					<!-- <view class="look">
						<text :class="ele.is_see == 1 ?'read' : ''">查看详情</text>
						<u-icon name="arrow-right" color="#D5BC81" size="20"></u-icon>
					</view> -->
				</view>
			</view>
			<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
		</template>
		<!-- 没有数据时 -->
		<view class="empty" style="text-align: center; margin-top: 146rpx;" v-else>
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
			<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">您还没有消息记录哦~</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				status:'loading',
				total:0,
				page:1,
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onShow() {
			this.list =[]
			this.page = 1
			this.getMessage()
		},
		// 分页加载
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getMessage();
			}
		},
		methods: {
			goDetails(ele){
				let type = ele.type === 5 ? 3 : ele.type
				this.utlis.goUrl(`/pages/mine/messageDetails?type=${type}&id=${ele.id}`)
			},
			async getMessage(){
				let {code,data} = await this.$u.api.getMessage({page:this.page});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.list = [...this.list, ...data.data];
					// this.list = [{
					// 	title: '模拟数据',
					// 	create_time: '2013-06-09',
					// 	content: '模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据',
					// 	is_see: 1
					// },
					// {
					// 	title: '模拟数据',
					// 	create_time: '2013-06-09',
					// 	content: '模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据模拟数据',
					// 	is_see: 0
					// }]
					this.total = data.total;
					if (this.total <= this.list.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	box-sizing: border-box;
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.list{
		width: 686rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 32rpx 32rpx 50rpx 32rpx ;
		margin-bottom: 30rpx;
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
			.title{
				font-size: 26rpx;
				color: #333333;
				line-height: 44rpx;
				letter-spacing: -1rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					position: relative;
					top: 8rpx;
					margin-right: 15rpx;
				}
			}
			.time{
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
			}
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.content{
				width: 100%;
				height: 26rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.look{
				height: 33rpx;
				font-size: 24rpx;
				color: #d5bc81;
				line-height: 33rpx;
				letter-spacing: 1rpx;
				display: flex;
				align-items: center;
				>text{
					margin-right: 11rpx;
				}
			}
			.read{
				color: #D8D8D8;
			}
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
